<!--
 * @Author: your name
 * @Date: 2022-02-21 15:28:46
 * @LastEditTime: 2022-02-21 16:20:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-1910b\vature.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <div class="box">
            <span>hello</span>
        </div> -->
    </div>

</body>
<script>
    var app1 = {
        type:"div",
        props:{
            class:"box",
            children:[
                {
                    type:"span",
                    props:{
                        children:["hellow"]
                    }
                }
            ]

        }
    }
    // 渲染虚拟dom的方法
    function render (jsx,root) {
        // 创建元素的方法
        let createElement = (jsx,parent)=>{
            console.log(jsx,parent)
            // 准备一个变量来承接要渲染的元素
            let cur = null;
            let {type,props} = jsx
            if (typeof(jsx) == "string") {
                cur = document.createTextNode(jsx)
                parent.append(cur)
            } else {
                cur = document.createElement(type)
            parent.append(cur)
            console.log(Object.keys(props))// 把对象的键变成一个数组
            // 不需要返回值的时候用forEACH
            Object.keys(props).forEach((item,index)=>{
                if (item == 'class') {
                    cur.setAttribute('class',props[item])
                } else if (item == 'children') {
                    if (Array.isArray(props[item])) {
                        props[item].forEach((val)=>{
                            createElement(val,cur)
                        }) 
                    }
                }

            })
            }
           
        }
        // 调用创建元素的方法
        createElement(jsx,root)

    }
    // id 元素不用获取
    render(app1,app)
</script>
</html>
